*{
	margin: 0;
	padding: 0;
}

.ani {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.ani.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }


.ani {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.ani.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes fade-in-down {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0); } }

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }

.ani.fade-in-down {
  -webkit-animation-name: fade-in-down;
  animation-name: fade-in-down; }


.ani {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.ani.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg); } }

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    transform: rotate3d(0, 0, 1, -5deg); }
  100% {
    transform: rotate3d(0, 0, 1, 0deg); } }

.ani.swing {
  -webkit-animation-name: swing;
  animation-name: swing; }


.ani {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.ani.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes stretch {
  0% {
    -webkit-transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1); } }

@keyframes stretch {
  0% {
    transform: scale3d(1, 1, 1); }
  30% {
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    transform: scale3d(1.05, 0.95, 1); }
  100% {
    transform: scale3d(1, 1, 1); } }

.ani.stretch {
  -webkit-animation-name: stretch;
  animation-name: stretch; }
#myCanvas{
		border: 5px solid #000;
		position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
       /* background-size: 100% 100%;
		background: url(../img/bg.jpg);*/
	   }
.qihe{
	transition: all 1s ease;
	width: 0;
	height: 0;
	background: #fff;
	position: absolute;
    left: 0;
    right:0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 0 0 0 1000px #000000;
    display: none;
}
.qihe img{
     width: 100%;
     height: 100%;
}
.qihe a{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;  
}
.qihe .guanbi{
	width: 20px;
	height: 20px;
	line-height: 15px;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	background:rgba(0,0,0,0.7);
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	z-index: 999;
}
.ks{
	background-size: 100% 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-image: url(../img/ks.jpg);  
}
.begin{
	width: 200px;
    height: 50px;
    position: absolute;
    bottom: 100px;
    left: 580px;
    background: darkgoldenrod;
    background-size: contain;
    border-radius: 10px;
    z-index: 90;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    cursor: pointer;   
}
#box{
	background-size: 100% 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-image: url(../img/xc.jpg);
    display: none;
 }
.biao {
  width: 100px;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-top: -180px;
  margin-left: -500px; 
  }
  .biao .clock {
    width: 100%;
    height: 100px;
    border-radius: 50%;
    background-image: url(../img/bai.png);
    background-size: cover;
     }
  .biao .timeb {
    width: 100%;
    height: 35px;
    background: #fff;
    position: absolute;
    border-radius: 15px;
    text-align: center;
    line-height: 35px;
    font-size: 16px; 
    }

.biaoh {
  width: 100px;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-top: -180px;
  margin-left: 380px;
   }
  .biaoh .clockh {
    width: 100%;
    height: 100px;
    border-radius: 50%;
    background-image: url(../img/hei.png);
    background-size: cover;
     }
  .biaoh .timeh {
    width: 100%;
    height: 35px;
    background: #000;
    position: absolute;
    border-radius: 15px;
    text-align: center;
    line-height: 35px;
    font-size: 16px;
    color: #fff; 
 }
.right-bottom {
  width: 120px;
/*  height: 170px;*/
  position: absolute;
  left: 50%;
  top: 43%;
  margin-left: 380px;
  margin-top: 140px; 
  }

.heqi, .huiqi, .renshu,.close {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: center; }
.close{
	background: #D3AF7F;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
}
.heqi {
   width: 100%;
  height: 40px;
  margin-bottom: 10px;
  cursor: pointer; 
	background: #D3AF7F;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold; 
	text-align: center;}

.huiqi {
   width: 100%;
  height: 40px;
  margin-bottom: 10px;
  cursor: pointer; 
	background: #D3AF7F;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;}
.active{
	color: cornflowerblue;
}
.renshu {
   width: 100%;
  height: 40px;
  margin-bottom: 10px;
  cursor: pointer; 
	background: #D3AF7F;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;}
.left-bottom{
  width: 120px;
  position: absolute;
  right: 50%;
  top: 43%;
  margin-right: 380px;
  margin-top: 140px;
  text-align: center;
}
.anniu {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  cursor: pointer; 
  }
.start{
 width: 100%;
  height: 40px;
  margin-bottom: 10px;
  cursor: pointer; 
	background: #D3AF7F;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
   }
.ai {
   width: 100%;
  height: 40px;
  margin-bottom: 10px;
  cursor: pointer; 
	background: #D3AF7F;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
   }
.tui {
   width: 100%;
  height: 40px;
  margin-bottom: 10px;
  cursor: pointer; 
	background: #D3AF7F;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
   }
.two {
   width: 100%;
  height: 40px;
  margin-bottom: 10px;
  cursor: pointer; 
	background: #D3AF7F;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
  }
.blackwin, .whitewin, .qipu, .qipub, .qphe, .qphui, .qprenshu, .qipu1 {
  width: 400px;
  height: 300px;
  background-size: cover;
  background-image: url(../img/heisheng.png);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: none;
   }

.whitewin {
  background-image: url(../img/baisheng.png); 
  }

.qipu {
  background-image: url(../img/qipu.png); }
  .qipu .yes, .qipu .no {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 35px;
    left: 90px;
    z-index: 10;
    cursor: pointer; 
    }
  .qipu .no {
    left: 270px; 
    }

.qipub {
  background-image: url(../img/qipub.png);
   }
  .qipub .yes, .qipub .no {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 35px;
    left: 90px;
    z-index: 10;
    cursor: pointer;
     }
  .qipub .no {
    left: 270px; 
    }

.qphe {
  background-image: url(../img/heqima.png); 
  }
  .qphe .yes, .qphe .no {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 85px;
    left: 90px;
    z-index: 10;
    cursor: pointer; 
    }
  .qphe .no {
    left: 290px;
     }
.qphui {
  background-image: url(../img/huiqima.png); }
  .qphui .yes, .qphui .no {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 85px;
    left: 90px;
    z-index: 10;
    cursor: pointer; }
  .qphui .no {
    left: 290px; }

.qprenshu {
  background-image: url(../img/renshuma.png);
   }
  .qprenshu .yes, .qprenshu .no {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 85px;
    left: 90px;
    z-index: 10;
    cursor: pointer; 
    }
  .qprenshu .no {
    left: 290px; 
    }

.qipu1 {
  background-image: url(../img/qipu1.png); 
  }
  .qipu1 .yes, .qipu1 .no {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 85px;
    left: 90px;
    z-index: 10;
    cursor: pointer; 
    }
  .qipu1 .no {
    left: 290px; 
    }

.qphe, .qphui, .qprenshu, .qipu1 {
  width: 400px;
  height: 380px; 
  }